"ui nodejs";
/*
布局源自rhino的‘界面模板一’官方示例，在这里改为nodejs代码。
唱跳rap打篮球
QQ：565947467

*/
require('rhino').install();
const ui = require("ui");
const app = require('app');
const { showToast } = require('toast');

class MainActivity extends ui.Activity {

    constructor() {   //构造函数
        super();
        this.lists = [{
            title: "选项一",
            icon: "@drawable/ic_android_black_48dp"
        },
        {
            title: "选项二",
            icon: "@drawable/ic_settings_black_48dp"
        },
        {
            title: "选项三",
            icon: "@drawable/ic_favorite_black_48dp"
        },
        {
            title: "退出",
            icon: "@drawable/ic_exit_to_app_black_48dp"
        }]
    }

    onCreate(savedInstanceState) {
        super.onCreate(savedInstanceState);
    }

    get layoutXml() {   //xml布局
        return `
        <drawer id="drawer">
        <vertical>
            <appbar>
                <toolbar id="toolbar"  title="界面模板"/>
                <tabs id="tabs"/>
            </appbar>
            <viewpager id="viewpager"  >
                <frame  >
                    <text text="第一页内容"   textColor="#2f2f2f" textSize="16sp"/>
                    
                </frame>
                <frame >
                    <text text="第二页内容"  textColor="#ff0000" textSize="16sp"/>
                </frame>
                <frame >
                    <text text="第三页内容"  textColor="#00ff00" textSize="16sp"/>
                </frame>
            </viewpager>
        </vertical>
        <vertical layout_gravity="left" bg="#ffffff" w="280">
            <img w="280" h="200" scaleType="fitXY" src="https://tenfei02.cfp.cn/creative/vcg/veer/1600water/veer-163237246.jpg"/>
            <list id="menu" />
        </vertical>
    </drawer>
        `}

    onContentViewSet(view) {  //加载视图设置方法
        this.setSupportActionBar(view.findView('toolbar'));
        this._setupDrawer(view.findView('drawer'), view.findView('toolbar'))
        this._setupDrawerTitles(view.findView('viewpager'), view.findView('tabs'))
        this._setDataSourec(view.findView('menu'))
    }

    _setupDrawer(drawer, toolbar) {    //左上角联动抽屉方法
        this.setSupportActionBar(toolbar);  
        const toggle = new androidx.appcompat.app.ActionBarDrawerToggle(this, drawer, toolbar, 0, 0);
        toggle.syncState();
        drawer.addDrawerListener(toggle);
    }

    onCreateOptionsMenu(menu, inflater) { //生成右上角菜单
        menu.add('设置');
        menu.add('关于');
        return true;
    }

    onOptionsItemSelected(item) {  //设置监听右上角菜单
        switch (item.getTitle()) {
            case "关于":
                this._showMaterial3Alert("AutoJS", "Auto.js界面模板 v1.0.0");
                break;
            case "设置":
                app.startActivity("settings");
                break;
        }
        return true;
    }
    _setupDrawerTitles(viewpager, tabs) {
        viewpager.setTitles(["标签一", "标签二", "标签三"]) //设置标签title
        tabs.setupWithViewPager(viewpager)      //标签和frame联动
    }

    _setDataSourec(view) {    //左侧滑的菜单列表
        view.setItemTemplate(`
            <horizontal bg="?selectableItemBackground" w="*" >
                <img w="50" h="50" padding="16" src="{{this.icon}}" tint="#6851aa"/>
                <text textColor="#2f2f2f" textSize="15sp" text="{{this.title}}" layout_gravity="center"/>
            </horizontal>
            `)
        view.on('item_created', (itemView, holder) => {
            itemView.setOnClickListener(() => {
                switch (holder.data.title) {
                    case '选项一':
                        showToast(holder.data.title);
                        break;
                    case '选项二':
                        showToast(holder.data.title);
                        break;
                    case '选项三':
                        showToast(holder.data.title);
                        break;
                    case '退出':
                        process.exit()
                        break;
                }

            });
        })
        view.setDataSource(this.lists)
    }

    _showMaterial3Alert(title, message) {   //对话框方法
        const MaterialAlertDialogBuilder = com.google.android.material.dialog.MaterialAlertDialogBuilder;
        new MaterialAlertDialogBuilder(this)
            .setTitle(title)
            .setMessage(message)
            .setPositiveButton("OK", null)
            .show();
    }
}
ui.setMainActivity(MainActivity);   